<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">灵璧政协</h1>
		</header>
		<div class="mui-content">
		    <!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a href="" class="mui-navigate-right">Item 1</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="" class="mui-navigate-right">Item 2</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="" class="mui-navigate-right">Item 3</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="" class="mui-navigate-right">Item 4</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="" class="mui-navigate-right">Item 5</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh : {
				    container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {
				      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				      height:'50px',//可选,默认50px.下拉刷新控件的高度,
				      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
				      auto: true,//可选,默认false.首次加载自动上拉刷新一次
				      callback : pulldownRefresh
				    }
				  },
				swipeBack:true
			  });
			  
			  /**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
		</script>
	</body>

</html>